<template>
	<view class="main">
		<u-navbar
		title=" "
		:is-back="false"
		title-size="34"
		back-icon-color="#ffffff"
		title-color="#ffffff"
		:border-bottom="false"
		:background="background">
		<view class="header">
			<view class="back">
				<u-icon name="arrow-left" color="#ffffff" size="34" @tap="black"></u-icon>
			</view>
			<view class="title">上传身份证</view>
			<view class="right-btn">
				<image src="../../static/image/ico/kefu.png" mode=""></image>
			</view>
		</view>
		</u-navbar>
		<view class="id_card">
			<view class="id_card_title">请上传完整、清晰的身份证图片</view>
			<view class="item">
				<u-upload :custom-btn="true" :show-upload-list="false">
					<view slot="addBtn" class="slot-btn">
						<image src="../../static/image/idcard2.png" mode="aspectFill"></image>
					</view>
				</u-upload>
				<view class="item_title">身份证人像面</view>
			</view>
			<view class="item">
				<u-upload :custom-btn="true" :show-upload-list="false">
					<view slot="addBtn" class="slot-btn">
						<image src="../../static/image/idcard1.png" mode="aspectFill"></image>
					</view>
				</u-upload>
				<view class="item_title">身份证国徽面</view>
			</view>
			<button type="default" class="submit">提交</button>
		</view>
		<view class="content">
			<view class="cont">
				<view class="item">
					<text>真实姓名</text>
					<text>李***</text>
				</view>
				<view class="item">
					<text>身份证号码</text>
					<text>1***********2</text>
				</view>
			</view>
			<view class="tips">温馨提示:如需重新认证,请联系在线客服</view>
		</view>
		
		<u-popup v-model="loading_show" mode="center" closeable>
			<view class="loading_cont">
				<image src="../../static/image/dengdai.png" mode=""></image>
				<view class="title">等待客服审核</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				background: {
					backgroundColor:"#4A90E2"
				},
				pact:false,
				loading_show:true,//是否展示等待弹窗
			}
		},
		onLoad() {
			
		},
		onShow() {
			
		},
		onPullDownRefresh() {

		    setTimeout(function () {
		        uni.stopPullDownRefresh();
		    }, 1000);
		},
		methods: {
			//返回
			black(){
				uni.navigateBack()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		min-height: 100vh;
		background-color: #f9f9f9;
		padding:30rpx;
		.header{
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding:0 30rpx;
			.title{
				font-size: 34rpx;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 34rpx;
			}
			.right-btn{
				image{
					width: 59rpx;
					height: 59rpx;
					background: #4388D9;
					border-radius: 30rpx;
				}
			}
		}
		.id_card{
			.id_card_title{
				font-size: 32rpx;
				font-weight: 500;
				color: #333333;
				line-height: 45rpx;
				text-align: center;
			}
			.item{
				padding: 38rpx 0 42rpx 0;
				background-color: #FFFFFF;
				border-radius: 8rpx;
				margin-top: 30rpx;
				text-align: center;
				display: flex;
				flex-direction: column;
				justify-content:center;
				/deep/.u-upload{
					justify-content: center;
				}
				.slot-btn{
					width: 100%;
					image{
						width: 405rpx;
						height: 277rpx;
						// background: #1296DB;
					}
				}
				.item_title{
					font-size: 28rpx;
					font-weight: 500;
					color: #333333;
					line-height: 40rpx;
					margin-top: 26rpx;
				}
			}
			.submit{
				height: 100rpx;
				background: #4A90E2;
				border-radius: 50rpx;
				font-size: 34rpx;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 100rpx;
				margin:68rpx 0 46rpx 0 ;
				&::after{
					border: 0;
				}
			}
		}
		.content{
			.cont{
				padding: 12rpx 22rpx;
				border-radius: 8rpx;
				background-color: #FFFFFF;
				.item{
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 25rpx 0;
					border-bottom: 1px solid #E6E6E6;
					text{
						font-size: 28rpx;
						color: #4C4C4C;
						line-height: 40rpx;
						&:last-child{
							color: #AEAEAE;
						}
					}
					&:last-child{
						border: 0;
					}
				}
			}
			.tips{
				font-size: 24rpx;
				color: #AEAEAE;
				line-height: 33rpx;
				margin-top: 60rpx;
				text-align: center;
			}
		}
		.loading_cont{
			padding: 100rpx 162rpx;
			text-align: center;
			image{
				width: 89rpx;
				height: 98rpx;
			}
			.title{
				margin-top: 44rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;
				line-height: 40rpx;
			}
		}
		
	}
</style>
